/**
 * Created by ClearLiang on 2019/4/10
 * Function:
 * Desc: 卡片布局
 */
import React, {Component} from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {BoxShadow} from 'react-native-shadow';

export default class Item_List_1 extends Component {
    // 属性检测
    static propTypes = {};
    // 默认值设置
    static defaultProps = {};

    // 初始化state
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        let title = this.props.title;
        let titleMax = 10;
        const shadowOpt = {
            height: Config.deviceWidth-40,
            width: Config.deviceWidth-40,
            color: "#000",
            border: 5,
            radius: 5,
            opacity: 0.2,
            x: 5,
            y: 5,
            style: {marginVertical: 5}
        };

        return (
            <View style={[styles.container]}>
                <View style={[styles.flex, {margin: 20}]}>
                    <BoxShadow setting={shadowOpt}>

                        <View style={[styles.header]}>
                            <View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
                                <View style={styles.header_head}>
                                    <View style={[styles.flex, styles.center]}>
                                        <Image style={styles.header_head_img}
                                               source={require('../images/qr_code.png')}/>
                                    </View>
                                </View>

                                <View style={styles.header_info}>
                                    <View>
                                        <Text
                                            style={styles.header_info_name}>{title ? (title.length > titleMax ? title.substr(0, titleMax) + "..." : title) : "默认值"}</Text>
                                    </View>
                                    <View>
                                        <Text style={styles.header_info_motto}>我的座右铭</Text>
                                    </View>
                                </View>

                                <View style={styles.header_more}>
                                    <TouchableOpacity>
                                        <Text style={styles.header_more_text} onPress={() => {
                                            alert("abc");
                                        }}>...</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>

                        <View style={[styles.body, styles.flex]}>
                            <View style={[{flex: 1, flexDirection: 'row'}]}>
                                <View style={[{flex: 1, backgroundColor: 'green'}, styles.center]}>
                                    <Text style={styles.body_name_text}>Hello World</Text>
                                </View>
                                <View style={[{flex: 1, backgroundColor: 'lightblue'}, styles.center]}>
                                    <Text style={styles.body_name_text}>Hello World</Text>
                                </View>
                            </View>
                            <View style={[{
                                backgroundColor: 'gray',
                                borderBottomLeftRadius: 5,
                                borderBottomRightRadius: 5,
                            }, styles.flex, styles.center]}>
                                <Text style={styles.body_name_text}>Hello World</Text>
                            </View>
                        </View>

                    </BoxShadow>
                </View>
            </View>
        );
    }
}

// 构建样式
const styles = StyleSheet.create({
    container: {
        height: Config.deviceWidth,
        width: Config.deviceWidth,
    },
    header: {
        height: 80,
        backgroundColor: 'orange',
        borderTopLeftRadius: 5,
        borderTopRightRadius: 5,
    },
    header_head: {
        marginLeft: 15,
        borderRadius: 60,
        backgroundColor: 'red',
        height: 60,
        width: 60,
    },
    header_head_img: {
        height: 50,
        width: 50,
    },
    header_info: {
        marginLeft: 15,
    },
    header_info_name: {
        fontSize: 20,
        color: 'white',
    },
    header_info_motto: {
        fontSize: 12,
        color: 'gray',
    },
    header_more: {
        flex: 1,
        alignItems: 'flex-end',
        justifyContent: 'center',
        height: 60,
    },
    header_more_text: {
        fontSize: 25,
        fontWeight: 'bold',
        color: 'gray',
        marginRight: 15,
    },
    body: {
        backgroundColor: '#c8c8c8',
        borderBottomLeftRadius: 5,
        borderBottomRightRadius: 5,
    },
    body_name: {},
    body_name_text: {},
    flex: {
        flex: 1,
        flexDirection: 'column',
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    textStyle: {
        fontSize: 20,
        color: 'white',
    },

});